<template>
	<view>
		<!-- #ifdef H5 -->
		<uNavbar title="忘记密码"></uNavbar>
		<!-- #endif -->

		<view class="mask"></view>
		<view class="logos flex_ZC">
			<view class="modular_box">
				<view class="binding flex_dq" style="margin-top: 30px;">
					<u-input type="text" placeholder="请输入手机号" border='none' maxlength="11"
						:placeholderStyle="placeholder" v-model.trim="phone"><text slot="prefix"
							class="slots"></text></u-input>
				</view>
				<view class="binding flex_dq" style="margin-top: 30px;">
					<u-input placeholder="请输入验证码" maxlength="6" border='none' :placeholderStyle="placeholder"
						v-model.trim="sms_code">
						<text slot="prefix" class="slots"></text>
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
							<u-button @click="varify2()" :text="tips" type="success" size="mini"></u-button>
						</template>
					</u-input>
				</view>
				<view v-if="isyzm">
					<web-view :fullscreen="false" src="/static/local.html" @message="callback2">测试</web-view>
				</view>
				<view class="binding flex_dq" style="margin-top: 30px;">
					<u-input type="password" placeholder="请设置新密码" border='none' maxlength="32"
						:placeholderStyle="placeholder" v-model.trim="password"><text slot="prefix"
							class="slots"></text></u-input>
				</view>
				<view class="binding flex_dq" style="margin-top: 30px;">
					<u-input type="password" placeholder="请确认新密码" border='none' maxlength="32"
						:placeholderStyle="placeholder" v-model.trim="re_password"><text slot="prefix"
							class="slots"></text></u-input>
				</view>

				<view class="signIn1 mart68 flex_c" @click="isComplete">
					<text>登录</text>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import {
		resetPassword
	} from "../../api/user.js"
	import {
		sendSmsCode
	} from "../../api/user.js"
	export default {
		data() {
			return {
				tips: '',
				phone: '', //手机号
				password: '', //密码
				re_password: '', //新密码
				sms_code: '', //验证码
				placeholder: 'color:#999999',
				ruleState: false, //规则校验
				canClick: true,
				isyzm: false,
				randstr: "",
				ticket: "",
			}
		},
		onLoad() {

		},

		methods: {
			callback2(res) {
				let that = this
				that.isyzm = false
				let r = res.detail.data[0].res;
				if (r.ret === 0) {
					that.randstr = r.randstr
					that.ticket = r.ticket
					that.getCode()
					console.log("成功")
					//成功，传递数据给后台进行验证
					// 这里后台会给一个借口,把后台需要的参数传过去

				} else {
					console.log("验证失败")
					// 提示用户完成验证
				}
				console.log(1111111111, r);
			},
			callback(res) {
				// 用户操作验证码或者关闭刷新腾讯返回的内容 
				let that = this
				if (res.ret === 0) {
					that.randstr = res.randstr
					that.ticket = res.ticket
					that.getCode()
					console.log("成功")
					//成功，传递数据给后台进行验证
					// 这里后台会给一个借口,把后台需要的参数传过去

				} else {
					console.log("验证失败")
					// 提示用户完成验证
				}
			},
			varify2() {
				// #ifdef H5
				if (uni.$u.test.isEmpty(this.phone)) {
					uni.$u.toast('请输入您的手机号');
				} else {
					this.varify()
				}

				// #endif
				// #ifdef MP-WEIXIN
				this.getCode()
				// #endif
				// #ifdef MP-ALIPAY
				if (uni.$u.test.isEmpty(this.phone)) {
					uni.$u.toast('请输入您的手机号');
				} else {
					this.getCode()
				}

				// #endif
			},
			varify() {
				let appid = '192455824'; // 腾讯云控制台中对应这个项目的 appid
				//生成一个滑块验证码对象
				let captcha = new TencentCaptcha(appid, this.callback);
				// 滑块显示
				captcha.show();

			},
			// 重新获取
			codeChange(text) {
				this.tips = text;
			},

			// 验证码
			getCode() {
				let that = this;
				let data = {
					mobile: that.phone,
					template_code: 'user_retrieve_pwd',
					rand_str: that.randstr,
					ticket: that.ticket,
				}
				console.log(data);
				sendSmsCode(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						if (that.$refs.uCode.canGetCode) {
							that.$refs.uCode.start();
						}
					}
				})
			},

			// 规则校验
			ruleValidation() {
				let that = this;
				let {
					phone,
					password,
					re_password,
					sms_code,
				} = that;
				if (uni.$u.test.isEmpty(phone)) {
					uni.$u.toast('请输入手机号');
					return;
				}
				if (!uni.$u.test.code(sms_code, 6)) {
					uni.$u.toast('验证码错误');
					return;
				}
				if (uni.$u.test.isEmpty(password)) {
					uni.$u.toast('请输入密码');
					return;
				}
				if (uni.$u.test.isEmpty(re_password)) {
					uni.$u.toast('请确认新密码');
					return;
				}
				if ((password !== re_password)) {
					uni.$u.toast('两次密码不一致');
					return;
				}
				this.ruleState = true
			},
			// 完成
			isComplete() {
				if (!this.canClick) {
					return;
				}
				this.ruleValidation()

				if (!this.ruleState) return;
				let data = {
					mobile: this.phone,
					new_password: this.password,
					again_password: this.re_password,
					sms_captcha_code: this.sms_code,
				}
				this.canClick = false
				resetPassword(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						setTimeout(() => {
							uni.reLaunch({
								url: '/pageLogin/login/login'
							})
						}, 1500)
					}
					setTimeout(() => {
						this.canClick = true;
					}, 1000); // 设定一个点击间隔，防止频繁点击

				})
			},
		},
	}
</script>
<style>
	page {
		background: #ffffff;

	}
</style>

<style scoped>
	.mask {
		width: 100%;
		height: 140rpx;
	}

	.modular_box {
		width: 690rpx;
		position: relative;
	}

	.slots {
		width: 40rpx;
	}

	.binding {
		width: 690rpx;
		margin: 0 auto;
		padding: 18rpx 20rpx;
		border-radius: 60rpx;
		background: #F5F5F5;
	}

	.signIn1 {
		width: 690rpx;
		height: 80rpx;
		background: #FFC300;
		border-radius: 36rpx;
		font-size: 32rpx;
	}

	.mart68 {
		margin-top: 70rpx;
	}

	/deep/.u-button--success {
		background: none !important;
		border: none !important;
		color: #FFC300 !important;
	}

	/deep/.u-button__text {
		font-size: 24rpx !important;
	}

	/* #ifdef MP-ALIPAY */
	/deep/.u-input__content__field-wrapper__field {
		background: transparent !important;
	}

	/* #endif */
</style>